<script setup>
import { reactive, ref, onMounted } from 'vue'
import { resetForm, objCoppy, myConfrim } from '@/utils'
import { addApi, listApi, editApi, deleteApi } from '@/api/notice'


// 弹窗属性
const dialog = reactive({
    title: '',
    visible: false,
    height: 200,
    width: 600,
})
// 搜索表单内容
const searchModel = reactive({
    noticeTitle: '',
    currentPage: 1,
    pageSize: 10,
    total: 0
})

// 新增表单内容
const addModel = reactive({
    type: '', // 0 新增 1 编辑
    noticeId: '',
    noticeTitle: '',
    noticeText: '',
    createTime: ''
})
// 新增表单校验规则
const rules = {
    noticeTitle: [
        {
            trigger: 'blur',
            required: true,
            message: '请输入公告标题'
        }
    ],
    noticeText: [
        {
            trigger: 'blur',
            required: true,
            message: '请输入公告内容'
        }
    ],
}

// 表格数据
const tableData = ref([])
// 表格高度
const tableHeight = ref(0)
onMounted(() => {
    tableHeight.value = window.innerHeight - 270
})
// 获取列表
const getList = async () => {
    const res = await listApi(searchModel)
    if (res) {
        tableData.value = res.data.records
        searchModel.total = res.data.total
    }
}

getList()

// 搜索按钮
const searchBtn = () => getList()
// 重置按钮
const closeBtn = () => {
    searchModel.noticeTitle = ''
    searchModel.currentPage = 1
    getList()
}
const addForm = ref(null)
// 新增按钮
const addBtn = () => {
    // 清空上一次的表单
    resetForm(addForm.value, addModel)
    dialog.title = '新增公告'
    addModel.type = '0'
    dialog.visible = true
}
// 弹窗确认
const onConfirm = async () => {
    await addForm.value.validate(async (valid) => {
        if (valid) {
            let res = null
            if (addModel.type === '0') {
                res = await addApi(addModel)
            } else if (addModel.type === '1') {
                res = await editApi(addModel)
            }
            if (res) {
                ElMessage({
                    message: res.msg,
                    type: 'success',
                })
                getList()
                dialog.visible = false
            }
        }
    })
}
// 弹窗取消
const onClose = () => dialog.visible = false
// 编辑
const editBtn = (row) => {
    // 清空上一次的表单
    resetForm(addForm.value, addModel)
    // 把数据放入表单
    objCoppy(row, addModel)
    dialog.title = '编辑'
    addModel.type = '1'
    dialog.visible = true
}
// 删除
const deleteBtn = async (row) => {
    const confirm = await myConfrim('确定要删除吗?')
    if (confirm) {
        const res = await deleteApi({
            noticeId: row.noticeId
        })
        if (res) {
            ElMessage({
                message: res.msg,
                type: 'success',
            })
            getList()
        }
    }
}
// 分页大小改变时触发
const sizeChange = (val) => {
    searchModel.pageSize = val
    getList()
}
// 分页页数改变时触发
const currentChange = (val) => {
    searchModel.currentPage = val
    getList()
}
</script>

<template>
    <!-- 搜索框 -->
    <el-form :model="searchModel" :inline="true">
        <el-form-item>
            <el-input v-model="searchModel.noticeTitle" placeholder="请输入公告标题"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button icon="Search" @click="searchBtn">搜索</el-button>
            <el-button style="color: #ff7670;" icon="Close" @click="closeBtn">重置</el-button>
            <el-button v-permission="['sys:sysNotice:add']" type="primary" icon="Plus" @click="addBtn">新增</el-button>
        </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :height="tableHeight" :data="tableData" stripe border>
        <el-table-column prop="noticeTitle" label="公告标题"></el-table-column>
        <el-table-column prop="noticeText" label="公告内容"></el-table-column>
        <el-table-column v-permission="['sys:sysNotice:edit', 'sys:sysNotice:delete']" fixed="right" label="操作" width="200"
            align="center">
            <template #default="scope">
                <el-button @click="editBtn(scope.row)" type="primary" icon="Edit">
                    编辑
                </el-button>
                <el-button @click="deleteBtn(scope.row)" type="danger" icon="Delete">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page.sync="searchModel.currentPage"
        :page-sizes="[10, 20, 40, 80, 100]" :page-size="searchModel.pageSize" layout="total,sizes,prev,pager,next,jumper"
        :total="searchModel.total" background>
    </el-pagination>
    <!-- 弹窗 -->
    <el-dialog v-model="dialog.visible" :width="dialog.width" :close-on-click-modal="false">
        <template #header>
            <h1>{{ dialog.title }}</h1>
        </template>
        <div :style="{ height: dialog.height + 'px' }">
            <el-form style="margin: 0px 10px;" label-width="80px" ref="addForm" :model="addModel" :rules="rules">
                <el-form-item prop="noticeTitle" label="公告标题">
                    <el-input v-model="addModel.noticeTitle"></el-input>
                </el-form-item>
                <el-form-item prop="noticeText" label="公告内容">
                    <el-input type="textarea" v-model="addModel.noticeText"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="onClose">取消</el-button>
                <el-button type="primary" @click="onConfirm">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>